<template>
  <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
             label-width="80px">
      <el-row>
        <!-- 项目编号 -->
        <el-col :span="12">
          <el-form-item label="项目编号" prop="projectCode">
            <el-select v-model="dataForm.projectCode" placeholder="请选择项目编号" class="label_len" :disabled="selectDis">
              <el-option v-for="item in projectList" :key="item.prProjectNumber"
                         :label="item.prProjectNumber + item.prProjectName" :value="item.prProjectNumber">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 测定日期 -->
        <el-col :span="12">
          <el-form-item label="测定日期" prop="detectTime">
            <el-date-picker v-model="dataForm.detectTime" type="datetime" placeholder="测定日期" format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="margin-top: 50px">
        <!-- 耕前部分 -->
        <el-col :span="12" class="centered-col">
          <h3>耕前</h3>
          <el-table :data="formerTableData">
            <el-table-column label="测点" prop="point"></el-table-column>
            <el-table-column label="植被 g/m²" align="center">
              <template slot-scope="scope">
                <el-form-item :prop="`formerArea${scope.row.point}`" :rules="dataRule[`formerArea${scope.row.point}`]">
                  <el-input v-model="dataForm[`formerArea${scope.row.point}`]" placeholder="请输入植被" type="number" @input="calculateFormerAvg(),calculateCoverage(),calculateAfterAvg()"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
          </el-table>
        </el-col>

        <!-- 耕后部分 -->
        <el-col :span="12" class="centered-col">
          <h3>耕后</h3>
          <el-table :data="afterTableData">
            <el-table-column label="测点" prop="point"></el-table-column>
            <el-table-column label="植被 g/m²" align="center">
              <template slot-scope="scope">
                <el-form-item :prop="`afterArea${scope.row.point}`" :rules="dataRule[`afterArea${scope.row.point}`]">
                  <el-input v-model="dataForm[`afterArea${scope.row.point}`]" placeholder="请输入植被" type="number" @input="calculateAfterAvg(),calculateCoverage(),calculateFormerAvg()"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <p style="color: red">耕前耕后平均值：</p>
      <!-- 增加耕前和耕后平均计算值 -->
      <el-row style="margin-top: 20px">
        <el-col :span="12">
          <el-form-item label="耕前计算值">
            <el-input v-model="dataForm.formerAvg" :disabled="true" placeholder="耕前平均计算值" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="耕前校验值">
            <el-input v-model="dataForm.former" placeholder="请输入耕前校验值" type="number"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px">
        <el-col :span="12">
          <el-form-item label="耕后计算值">
            <el-input v-model="dataForm.afterAvg" :disabled="true" placeholder="耕后平均计算值" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="耕后校验值">
            <el-input v-model="dataForm.after" placeholder="请输入耕后校验值" type="number"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <p style="color: red">植被覆盖率：</p>
      <el-row style="margin-top: 20px">
        <el-col :span="12">
          <el-form-item label="覆盖率计算值">
            <el-input v-model="dataForm.computeCoverage" :disabled="true" placeholder="植物覆盖率" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="覆盖率校验值">
            <el-input v-model="dataForm.coverage" placeholder="请输入覆盖率" type="number"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      dataForm: {
        id: 0,
        projectCode: '',
        detectTime: '',
        coverage: '',
        computeCoverage:'',
        detectPeople: '',
        recorders: '',
        checkers: '',
        formerArea1: '',
        formerArea2: '',
        formerArea3: '',
        former: '',
        afterArea1: '',
        afterArea2: '',
        afterArea3: '',
        after: '',
        status: '',
        formerAvg:'',
        afterAvg:''
      },
      // 耕前植被数据
      formerTableData: [
        { point: 1 },
        { point: 2 },
        { point: 3 }
      ],
      // 耕后植被数据
      afterTableData: [
        { point: 1 },
        { point: 2 },
        { point: 3 }
      ],
      selectDis:false,
      projectList:[],
      dataRule: {
        projectCode: [
          { required: true, message: '项目编号不能为空', trigger: 'blur' }
        ],
        detectTime: [
          { required: true, message: '检测日期不能为空', trigger: 'blur' }
        ],
        coverage: [
          { required: true, message: '植被覆盖率不能为空', trigger: 'blur' }
        ],
        detectPeople: [
          { required: true, message: '检测人不能为空', trigger: 'blur' }
        ],
        recorders: [
          { required: true, message: '记录人不能为空', trigger: 'blur' }
        ],
        checkers: [
          { required: true, message: '校核人不能为空', trigger: 'blur' }
        ],
        formerArea1: [
          { required: true, message: '耕前植被1不能为空', trigger: 'blur' }
        ],
        formerArea2: [
          { required: true, message: '耕前植被2不能为空', trigger: 'blur' }
        ],
        formerArea3: [
          { required: true, message: '耕前植被3不能为空', trigger: 'blur' }
        ],
        former: [
          { required: true, message: '前平均值不能为空', trigger: 'blur' }
        ],
        afterArea1: [
          { required: true, message: '耕后植被1不能为空', trigger: 'blur' }
        ],
        afterArea2: [
          { required: true, message: '耕后植被2不能为空', trigger: 'blur' }
        ],
        afterArea3: [
          { required: true, message: '耕后植被3不能为空', trigger: 'blur' }
        ],
        after: [
          { required: true, message: '后平均值不能为空', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '审核状态 0  1不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  mounted (){
    this.getprojectList()
  },
  methods: {
    //获取项目列表
    getprojectList() {
      this.$http({
        url: this.$http.adornUrl(`/reportapproval/product/getProjectNumber`),
        method: 'post',
        data: this.$http.adornData({
        })
      }).then((data) => {
        if (data && data.code === 0) {
          console.log(data.productList)
          this.projectList = data.productList
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    // 计算耕前平均值
    calculateFormerAvg() {
      const formerArea1 = parseFloat(this.dataForm.formerArea1) || 0;
      const formerArea2 = parseFloat(this.dataForm.formerArea2) || 0;
      const formerArea3 = parseFloat(this.dataForm.formerArea3) || 0;

      const avg = (formerArea1 + formerArea2 + formerArea3) / 3;
      this.dataForm.former = avg.toFixed(1)
      this.dataForm.formerAvg = avg.toFixed(1); // 保留1位小数
    },
    // 计算耕后平均值
    calculateAfterAvg() {
      const afterArea1 = parseFloat(this.dataForm.afterArea1) || 0;
      const afterArea2 = parseFloat(this.dataForm.afterArea2) || 0;
      const afterArea3 = parseFloat(this.dataForm.afterArea3) || 0;

      const avg = (afterArea1 + afterArea2 + afterArea3) / 3;
      this.dataForm.after = avg.toFixed(1)
      this.dataForm.afterAvg = avg.toFixed(1); // 保留1位小数
    },
    //计算覆盖率
    calculateCoverage(){
      const former = parseFloat(this.dataForm.former) || 0
      const after = parseFloat(this.dataForm.after) || 0

      const avg = (former - after) / former * 100;
      this.dataForm.computeCoverage = avg.toFixed(1)
      this.dataForm.coverage = avg.toFixed(1) // 保留1位小数
    },
    init(id) {
      this.dataForm.id = id || 0
      this.selectDis = false
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (this.dataForm.id) {
          this.$http({
            url: this.$http.adornUrl(`/reportapproval/vegetationrecordform/info/${this.dataForm.id}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then((data) => {
            if (data && data.code === 0) {
              this.dataForm.projectCode = data.vegetationRecordForm.projectCode
              this.dataForm.detectTime = data.vegetationRecordForm.detectTime
              this.dataForm.coverage = data.vegetationRecordForm.coverage
              this.dataForm.detectPeople = data.vegetationRecordForm.detectPeople
              this.dataForm.recorders = data.vegetationRecordForm.recorders
              this.dataForm.checkers = data.vegetationRecordForm.checkers
              this.dataForm.formerArea1 = data.vegetationRecordForm.formerArea1
              this.dataForm.formerArea2 = data.vegetationRecordForm.formerArea2
              this.dataForm.formerArea3 = data.vegetationRecordForm.formerArea3
              this.dataForm.former = data.vegetationRecordForm.former
              this.dataForm.afterArea1 = data.vegetationRecordForm.afterArea1
              this.dataForm.afterArea2 = data.vegetationRecordForm.afterArea2
              this.dataForm.afterArea3 = data.vegetationRecordForm.afterArea3
              this.dataForm.after = data.vegetationRecordForm.after
              this.dataForm.status = data.vegetationRecordForm.status
              this.dataForm.afterAvg = ''
              this.dataForm.formerAvg = ''
              this.dataForm.computeCoverage = '',
              this.selectDis = true
            }
          })
        }
      })
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/reportapproval/vegetationrecordform/${!this.dataForm.id ? 'save' : 'update'}`),
            method: 'post',
            data: this.$http.adornData({
              'id': this.dataForm.id || undefined,
              'projectCode': this.dataForm.projectCode,
              'detectTime': this.dataForm.detectTime,
              'coverage': this.dataForm.coverage,
              'detectPeople': this.dataForm.detectPeople,
              'recorders': this.dataForm.recorders,
              'checkers': this.dataForm.checkers,
              'formerArea1': this.dataForm.formerArea1,
              'formerArea2': this.dataForm.formerArea2,
              'formerArea3': this.dataForm.formerArea3,
              'former': this.dataForm.former,
              'afterArea1': this.dataForm.afterArea1,
              'afterArea2': this.dataForm.afterArea2,
              'afterArea3': this.dataForm.afterArea3,
              'after': this.dataForm.after,
              'status': this.dataForm.status
            })
          }).then((data) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.warning(data.msg)
            }
          })
        }
      })
    }
  }
}
</script>
<style scoped>

</style>
